<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取元素</title>
  </head>
  <body>
    <div id="nowTime">2021-02-02</div>
    <ul>
      <li class="item">越努力越幸运1</li>
      <li class="item">越努力越幸运2</li>
      <li class="item">越努力越幸运3</li>
      <li class="item">越努力越幸运4</li>
    </ul>

    <script>
      // 1、根据 id 获取
      var ele = document.getElementById('nowTime');
      console.log('根据 id 获取--', ele);

      // 2、根据标签名获取
      var liArr = document.getElementsByTagName('li');
      console.log('根据标签名获取--', liArr);

      // H5新增
      // 3、根据类名获取
      var liArr2 = document.getElementsByClassName('item');
      console.log('根据类名获取--', liArr2);

      // 4、根据选择器获取第一个元素
      var oneLi = document.querySelector('.item');
      console.log('第一个元素--', oneLi);

      // 5、根据选择器获取所有元素集合
      var liArr3 = document.querySelectorAll('li');
      console.log('所有元素--', liArr3);

      // 6、获取特殊元素（不常用）
      var bodyEle = document.body;
      console.log('body元素--', bodyEle);
      var htmlEle = document.documentElement;
      console.log('html元素--', htmlEle);
    </script>
  </body>
</html>
